<template>
	<view class="warp">
		<view>
			<image class="header" src="../../static/U/top.png" mode="widthFix"></image>
			<view class="body">
				<image class="header" src="../../static/U/会员权益.png" mode="widthFix"></image>

				<image class="dinggou" src="../../static/U/B_立即订购.png" mode="widthFix" @click="jumpBtnFan"></image>
				<image class="quanyi" src="../../static/U/尊享权益.png" mode="widthFix"></image>
				<image class="header" src="../../static/U/天翼云盘黄金会员.png" mode="widthFix"></image>
				<image class="vip" src="../../static/U/AI文生图.png" mode="widthFix"></image>
				<image class="vip" src="../../static/U/云盘100GB个人空间包.png" mode="widthFix"></image>
				<image class="vip" src="../../static/U/云U盘月卡.png" mode="widthFix"></image>

				<view class="click">
					<image class="header" src="../../static/U/订购说明.png" mode="widthFix"></image>
					<view class="clickBtn" @click="jumpUrl()">

					</view>
					<view class="clickBtn2" @click="jumpUrl()">

					</view>
				</view>

			</view>
		</view>
		<view class="shadow" v-if="isShow">

		</view>

		<view class="tankbox" v-if="dinggouShow">
			<view class="closeBtn" @click="closeFun">
				X
			</view>
			<view class="title">
				短信验证
			</view>
			<view class="content">
				<view class="gifbox">
					<input class="phoneNumber" @input="mobileData" v-model="mobile" type="number" maxlength="11"
						placeholder="请输入您的手机号">
				</view>
				<view class="yzmbox">
					<input class="phoneNumber yzm" type="number" v-model="code" placeholder="请输入验证码">
					<view class="yzminner" @click="sendCode" v-if="!verificationTime">
						发送验证码
					</view>
					<view class="yzminner" v-if="verificationTime">
						重新获取{{verificationTime}}s
					</view>

				</view>

			</view>
			<view class="price">
				会员金额：20元
			</view>
			<view class="submitBtnBox">
				<view class="submitBtn quitBtn" @click="useBtn">
					取消
				</view>
				<view class="submitBtn" @click="dingGou">
					订购

				</view>
			</view>
			<view class="" style="display: flex;flex-wrap: nowrap;">
				<uni-section title=" " style="background-color: transparent; ">
					<uni-data-checkbox multiple v-model="checkbox1" :localdata="hobby"
						selectedColor="orange"></uni-data-checkbox>
				</uni-section>
				<p class="xieyi">我已阅读并同意<text class="color" @click="openXufei">《自动续费服务协议》</text><text class="color"
						@click="openInfo">《会员服务协议》</text><text class="color"
						@click="openDinggou">《订购说明》</text>，到期自动续费可随时取消业务</p>
			</view>

		</view>
		<!--  -->
		<view class="success" v-if="hadknow">
			<!-- <image src="../../static/U/top.png" mode="widthFix"></image> -->
			<view class="title">
				订购成功
			</view>
			<view class="">
				您好!<br />您的云盘AI文生图会员业务正在受理中，可登录天翼云盘客户端查看，如有疑问可拨打客服电话4009693922。
			</view>
			<view class="button" @click="knowFun">
				我知道了
			</view>

		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				mobile: '', //用户手机号
				code: '', //短信验证码
				timer: '',
				verificationTime: '',
				checkbox1: [0],
				hobby: [{
					text: '',
					value: 0
				}],
				dinggouShow: false,
				isShow: false,
				hadknow: false
			}
		},
		onLoad() {

		},
		methods: {
			jumpBtnFan() {
				this.dinggouShow = true
				this.isShow = true

			},
			mobileData(e) {
				this.mobile = e.detail.value;
			},
			//发送验证码
			sendCode() {
				console.log(this.mobile, this.$config.xb_20_id, this.$config.xb_20_price)
				let myreg = /^[1]\d{10}$/;
				if (!myreg.test(this.mobile)) {
					this.$utils.msg("请输入正确的手机号");
				} else {

					this.$http.sendCode({
							mobile: this.mobile,
							priceId: this.$config.xb_yp_id,
							priceCode: this.$config.xb_yp_price
						})
						.then(res => {
							console.log(res)
							if (res.retCode == '0000') {

								this.verificationTime = 60;
								this.verificationDown();
								this.$utils.msg(res.msg);
							} else {
								this.$utils.msg(res.msg);
							}
						})
						.catch(error => {
							console.log(error);
							this.$utils.msg("网络异常");
						})
				}

			},
			// 倒计时
			verificationDown() {
				// 设置定时器
				this.timer = setInterval(() => {
					this.verificationTime = this.verificationTime - 1
					if (this.verificationTime < 10) this.verificationTime = '0' + this.verificationTime
					if (this.verificationTime <= 0) {
						// 清除定时器
						clearInterval(this.timer)
						this.verificationTime = ''
					}
				}, 1000)

			},
			closeFun() {
				this.hadknow = false
				this.isShow = false
				this.dinggouShow = false
				this.mobile = ''
				this.code = ''
			},

			//订购
			dingGou() {
				if (this.code) {
					console.log(this.code)
					if (this.checkbox1.length > 0) {
						this.$http.dingGou({
								mobile: this.mobile,
								authCode: this.code,
							})
							.then(res => {
								console.log(res);
								if (res.retCode == '0000') {
									this.hadknow = true
									// this.isShow = false
									this.dinggouShow = false
									this.mobile = ''
									this.code = ''
								} else if (res.retCode == '1') {
									this.$utils.msg('您已订购过该业务，请勿重复订购');
								} else if (res.retCode == '2') {
									this.$utils.msg('请输入正确的手机号或验证码');
								} else if (res.retCode == '0') {
									this.$utils.msg('用户单位时间内调用次数超过限制');
								}

							})
							.catch(error => {
								this.$utils.msg("系统异常");
							})

					} else {
						this.$utils.msg("请勾选会员协议");
					}

				} else {
					this.$utils.msg("手机号验证码不能为空");

				}
			},
			//使用
			useBtn() {
				this.dinggouShow = false
				this.isShow = false

				this.mobile = ''
				this.code = ''
			},
			//打开协议
			openInfo() {
				this.$utils.navigateTo("xingbaotiandi/questionnaire", {})
			},
			openXufei() {
				this.$utils.navigateTo("xingbaotiandi/xufei", {})
			},
			openDinggou() {
				this.$utils.navigateTo("xingbaotiandi/dinggou", {})
			},
			knowFun() {
				this.hadknow = false
				this.isShow = false
			},
			jumpUrl() {
				window.location.href = 'http://cloud.189.cn'
			}

		}
	}
</script>

<style lang="less">
	.warp {
		width: 100%;
		max-width: 540px;
		margin: 0 auto;
		height: 100vh;
		background: #03116a;
		box-sizing: border-box;
		padding-bottom: 30px;
		overflow: auto;


		.shadow {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			overflow: hidden;
			position: fixed;
			top: 0;
			left: 0;
		}

		image {
			width: 100%;
		}

		.body {
			width: 90%;
			margin: 0 5%;
			margin-top: -10%;
		}

		.click {
			position: relative;

			.clickBtn {
				width: 40%;
				height: 30px;
				// background: #1d9dff;
				position: absolute;
				top: 46%;
				right: 20px;
			}
			.clickBtn2{
				width: 40%;
				height: 30px;
				 // background: #1d9dff;
				position: absolute;
				top: 65%;
				left: 0;
			}
		}

		.dinggou {
			margin: 20px 0;
		}

		.quanyi {
			width: 40%;
			margin: 10px 30%;
		}

		.vip {
			margin: 10px 0;
		}

		.tankbox {
			width: 75%;
			height: 320px;
			background: url('../../static/U/短信验证-bg.png')no-repeat;
			background-size: 100% 100%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 20px;
			box-sizing: border-box;

			.closeBtn {
				font-size: 20px;

				position: absolute;
				top: 10px;
				right: 10px;
			}

			.title {
				text-align: center;
				font-size: 18px;
				font-weight: bold;

			}

			.content {
				margin-top: 20px;

				.gifbox {
					width: 100%;
					position: relative;

					.gif {
						width: 70%;
						height: 60px;
						position: absolute;
						top: -45px;
						left: 9%
					}

				}

				.phoneNumber {

					width: 100%;
					height: 40px;
					border: none;
					border-radius: 10px;
					font-size: 13px;
					padding: 0 20px;
					color: #b3b3b5;
					background-color: #f2f4fa;
					box-sizing: border-box;
					margin: 10px 0;
				}

				.uni-input-placeholder {
					color: #b3b3b5;
				}

				.yzmbox {
					position: relative;

					.yzminner {
						font-size: 14px;
						color: #1d9dff;
						position: absolute;
						top: 10px;
						right: 15px
					}

					.yzminner:before {
						// display: inline-block;
						// content: ' ';
						// width: 1px;
						// height: 12px;
						// background-color: #ddd;
						// margin-right: 10px;
					}

				}
			}

			.price {
				font-size: 14px;
				font-weight: bold;
			}

			.submitBtnBox {
				display: flex;
				flex-direction: row;

				.submitBtn {
					width: 55%;
					height: 40px;
					margin: 10px 5%;
					background: #5faefe;
					border-radius: 30px;
					line-height: 40px;
					font-size: 16px;
					color: #fff;
					font-weight: bold;
					text-align: center;
				}

				.quitBtn {
					background: #f2f4fa;
					color: #989899;
				}


			}

			.xieyi {
				font-size: 11px;
				line-height: 1.5;
				text-align: justify-all;

				.color {
					color: #5fadfe;


				}
			}

			/deep/ .uni-section .uni-section-header {
				display: none !important;
			}
		}

		.success {
			width: 75%;
			height: 280px;
			background: #fff;
			border-radius: 10px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 20px;
			box-sizing: border-box;

			image {
				width: 10%;
				position: absolute;
				top: -20%;
				left: 50%;
				transform: translateX(-50%);

			}

			.title {
				margin-top: 10%;
				text-align: center;
				font-size: 18px;
				font-weight: bold;

			}

			.button {
				width: 50%;
				height: 40px;
				line-height: 40px;
				background: #62afff;
				color: #fff;
				border-radius: 30px;
				text-align: center;
				font-size: 16px;
				font-weight: bold;
				margin: 30px 25% 10px 25%
			}
		}

	}
</style>